<template>
  <div>
    <el-row>
      <el-row >
        <el-col :span="6">
          <div style="background-color: #409EFF;width: 200px;height: 100px">
            总共供应商品数量：
            <b>{{showData.t1}}</b>
            <div>
              <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
            </div>
          </div>
        </el-col>
        <div>

        </div>
        <el-col :span="6" class="handle">
          <div style="background-color: #409EFF;width: 200px;height: 100px">
            正在供应商品的数量：
            <b>{{showData.t2}}</b>
            <div>
              <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="handle">
          <div style="background-color: #409EFF;width: 200px;height: 100px">
            停止供应商品的数量：
            <b>{{showData.t3}}</b>
            <div>
              <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="handle">
          <div style="background-color: #409EFF;width: 200px;height: 100px">
            本月营收：
            <b>{{showData.t4}}</b>
            <div>
              <div style="float: left;background-color: rgb(160, 207, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(140, 197, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(179, 216, 255);width: 50px;height: 41px"></div>
            </div>
            <div>
              <div style="float: left;background-color: rgb(217, 236, 255);width: 50px;height: 41px"></div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-col :span="11" :offset="1">

        <el-row>
          <el-col :span="6" :offset="16">
            <el-date-picker
              v-model="datatime"
              @change="getdate()"
              value-format="yyyy/MM/dd"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份">
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" :offset="10">
            <div id="main" style="width: 600px;height:400px;background-color: #fffcfc"></div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-row></el-row>
        <br>
        <el-row>

        </el-row>
        <el-row>
        </el-row>
        <el-row></el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "Supplier_home_page",
    data(){
      return{
        datatime:"",
        data1: [],
        data2: [],
        showData:{
          t1:"",
          t2:"",
          t3:"",
          t4:"",
        }
      }
    },
    methods:{
      getgysp(){
        //查询该供应商提供的商品数量
        let params = new URLSearchParams();
        params.append("pId",sessionStorage.getItem('id'));
        this.$axios.get("supplierSupplyOfGoods/queryAllgys.action",{params:params}).then(res=>{
          this.showData.t1=res.data.length;
        })
        //查询该供应商正在提供的商品数量
        params = new URLSearchParams();
        params.append("isDelete", 0);
        params.append("pId",sessionStorage.getItem('id'));
        this.$axios.get("supplierSupplyOfGoods/queryAllgys.action",{params:params}).then(res=>{
          this.showData.t2=res.data.length;
        })
        //查询该供应商停止提供的商品数量
        params = new URLSearchParams();
        params.append("isDelete", 1);
        params.append("pId",sessionStorage.getItem('id'));
        this.$axios.get("supplierSupplyOfGoods/queryAllgys.action",{params:params}).then(res=>{
          this.showData.t3=res.data.length;
        })

        // //查询该供应商本月营收
        this.$axios.get("thisMonthRevenue.action/"+sessionStorage.getItem('id'),null).then(res=>{
          this.showData.t4=res.data;
        })
      },
      getdate() {
        let params = {}
        params["startTime"] = this.datatime[0];
        params["endTime"] = this.datatime[1];
        params["loginUserId"] = sessionStorage.getItem("id")
        this.$axios.get("queryAllgysys.action", {params: params}).then(res => {
          if (res.data.length > 0) {
            this.data1 = [];
            this.data2 = [];
            this.companyRunningWater = res.data;
            this.companyRunningWater.forEach(item => {
              this.data1.push(item.rdate);
              this.data2.push(item.rmoney)
            })
          } else {
            this.data1 = [];
            this.data2 = [];
            this.$message.warning("暂无数据")
          }
          this.get()
        }).catch(error => {
          this.$message.error(error)
        })
      },
      get(){
        var _this = this
        var echarts = require('echarts');
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
          xAxis: {
            type: 'category',
            data: this.data1
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: _this.data2,
              type: 'line'
            }
          ]
        };
        myChart.setOption(option);
      }
    },mounted() {
      this.get()
    },
    created() {
      this.getdate()
      this.getgysp()
    }

  }
</script>

<style scoped>

</style>
